<template>
  <div>
    弟弟组件 分数{{score}}
    <button @click="handleClick">点击告诉告诉姐姐</button>
  </div>
</template>

<script>
import evtbus from '../utils/index.js'
export default {
  data () {
    return {
      score: 0,
      timer: null
    }
  },
  methods: {
    handleClick () {
      this.score = 100
      // 借助于空的vue实例（事件总线）发射自定义事件名称和数据
      evtbus.$emit('tell-score', this.score)
    }
  },
  beforeCreate () {
    console.log('beforeCreate', this.score, this.$el)
  },
  created () {
    // 一般在这里去发送请求
    console.log('created', this.score, this.$el)
  },
  beforeMount () {
    console.log('beforeMount', this.score, this.$el)
  },
  mounted () {
    // this.timer = setInterval(() => {
    //   console.log('111')
    // }, 1000)
    // 如果需要操作dom，可以在mounted钩子中执行
    console.log('mounted', this.score, this.$el)
  },

  // 这一对数据更新会执行
  beforeUpdate () {
    console.log('beforeUpdate', this.score, this.$el)
  },
  updated () {
    console.log('updated', this.score, this.$el)
  },

  // 组件被销毁会触发
  beforeDestroy () {
    // 开发可以在清除定时器和事件绑定
    clearInterval(this.timer)
    console.log('beforeDestroy', this.score, this.$el)
  },
  destroyed () {
    console.log('destroyed', this.score, this.$el)
  }
}
</script>

<style>

</style>
